<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            padding: 10px;
        }
        div {
            border: 3px solid seagreen;
            width: 700px;
        }
        h1 {
            text-align: center;
            color: yellowgreen;
        }
        ul {
            margin-top: 50px;
            width: 500px;
            height: 200px;
            border: seagreen 3px dashed;
            margin: 30px auto;
            list-style: none;
        }
        li {
            width: 400px;
            padding: 5px;
            background-color: #eee;
            font-size: 14px;
            margin: 15px auto;
        }
        li a {
            float: right;
        }
        textarea {
            width: 400px;
            height: 50px;
            border: 3px solid seagreen;
            outline: none;
            resize: none;
            display: block;
            margin: 20px auto 5px;
        }
        .sub {
            display: block;
            background-color: seagreen;
            color: seashell;
            width: 200px;
            height: 30px;
            margin: 10px auto;
        }
        .remove {
            float: right;
        }
    </style>
</head>
<body>
    <div>
        <h1>留言板</h1>
        <ul> </ul>
        <textarea placeholder="请编辑您的留言"></textarea>
        <button class="sub">发布</button>
    </div>
    <script>
        var btn = document.querySelector(".sub")
        var txt = document.querySelector("textarea")
        var ul = document.querySelector("ul")
        btn.onclick = function () {
            if (txt.value.length == 0) {
                return;
            }
            //新增
            var t = txt.value
            var li = document.createElement("li")
            li.innerHTML = t
            ul.insertBefore(li, ul.children[0])
            var newBtn = document.createElement("button")
            newBtn.innerHTML = "删除"
            newBtn.className = "remove"
            newBtn.onclick = function () {
                ul.removeChild(this.parentNode)
            }
            li.append(newBtn)
            txt.value = ""
            //删除
        }
    </script>
</body>
</html>